import 'dart:ffi';
import 'dart:ui';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:onlineshop/constants/my_color.dart';

class BillPage extends StatefulWidget {
  const BillPage({super.key});

  @override
  State<BillPage> createState() => _BillPageState();
}

class _BillPageState extends State<BillPage> {
  // swiper索引
  int currentSwiper = 1;

  void changeSwiper(id) {
    setState(() {
      currentSwiper = id;
    });
  }

  // 结账成功弹窗
  void _showBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isDismissible: true,
      backgroundColor: Colors.transparent, // 透明背景
      builder: (BuildContext context) {
        return Container(
          height: 300, // 设置弹出层高度
          width: double.infinity,
          padding: const EdgeInsets.only(
            top: 56,
            bottom: 50,
          ),
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              const Text(
                '谢谢你的订单',
                style: TextStyle(
                  color: Color(0xffF83A26),
                  fontSize: 25,
                  fontWeight: FontWeight.w700,
                ),
              ),
              Text(
                '你可以追踪送货情况“订单”部分',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w400,
                  color: const Color(
                    MyColor.PRIMARY_COLOR,
                  ).withOpacity(0.4),
                ),
              ),
              Container(
                height: 54,
                width: double.infinity,
                padding: const EdgeInsets.symmetric(
                  horizontal: 50,
                ),
                child: ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(
                      const Color(MyColor.PRIMARY_COLOR),
                    ),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(18),
                      ),
                    ),
                  ),
                  onPressed: () {},
                  child: const Text(
                    '查看物流信息',
                    style: TextStyle(
                      color: Color(0xffFFDB8B),
                      fontSize: 16,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: GestureDetector(
          onTap: () => Navigator.pop(context),
          child: const Padding(
            padding: EdgeInsets.only(left: 16),
            child: Icon(Icons.arrow_back),
          ),
        ),
        actions: [
          Row(
            children: [
              IconButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/cart');
                },
                icon: Image.asset('assets/icons/cart.png'),
              ),
            ],
          ),
        ],
        backgroundColor: const Color(MyColor.BACKGROUND_COLOR),
      ),
      backgroundColor: const Color(MyColor.BACKGROUND_COLOR),
      body: Column(
        children: [
          const SizedBox(
            height: 10,
          ),
          const Align(
            alignment: Alignment.center,
            child: Text(
              "结账",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 23,
                fontWeight: FontWeight.w700,
                color: Color(MyColor.PRIMARY_COLOR),
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          // 送货地址
          Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 20,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '送货地址',
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    color: const Color(MyColor.PRIMARY_COLOR).withOpacity(0.4),
                  ),
                ),
                const SizedBox(
                  height: 12,
                ),
                const Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '山东济南市市中区',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                        color: Color(MyColor.PRIMARY_COLOR),
                      ),
                    ),
                    Text(
                      '更改',
                      style: TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w400,
                        color: Color(0xffF83A26),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          const SizedBox(
            height: 40,
          ),
          // 付款方式
          Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 20,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('付款方式'),
                const SizedBox(
                  height: 24,
                ),
                CarouselSlider(
                  items: [PayCardItem(), PayCardItem(), PayCardItem()],
                  options: CarouselOptions(
                    enlargeCenterPage: true,
                    autoPlayCurve: Curves.easeInOut,
                    autoPlayAnimationDuration:
                        const Duration(milliseconds: 800),
                    viewportFraction: 0.8,
                    onPageChanged: (index, reason) => changeSwiper(index + 1),
                  ),
                )
              ],
            ),
          ),

          const SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [1, 2, 3]
                .map((item) => Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: Container(
                        width: 8,
                        height: 8,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: const Color(MyColor.PRIMARY_COLOR)
                              .withOpacity(currentSwiper == item ? 1 : 0.2),
                        ),
                      ),
                    ))
                .toList(),
          ),

          const SizedBox(
            height: 30,
          ),

          const Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 20,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '添加新的付款方式',
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    color: Color(MyColor.PRIMARY_COLOR),
                  ),
                ),
                SizedBox(
                  height: 14,
                ),
                PayMethodItem(
                  imgPath: 'assets/images/bill/wanshi.png',
                  name: '万事达卡',
                ),
                PayMethodItem(
                  imgPath: 'assets/images/bill/beibao.png',
                  name: '贝宝',
                ),
              ],
            ),
          ),

          // 结账
          Expanded(
            child: Container(
              padding: const EdgeInsets.all(20),
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30),
                  topRight: Radius.circular(30),
                ),
              ),
              child: Column(
                children: [
                  const Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '配送费',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          color: Color(MyColor.PRIMARY_COLOR),
                        ),
                      ),
                      Text(
                        '¥ 50',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          color: Color(MyColor.PRIMARY_COLOR),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  const Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '合计',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          color: Color(MyColor.PRIMARY_COLOR),
                        ),
                      ),
                      Text(
                        '¥ 710',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          color: Color(MyColor.PRIMARY_COLOR),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  Container(
                    width: double.infinity,
                    height: 50,
                    padding: const EdgeInsets.symmetric(
                      horizontal: 20,
                    ),
                    child: ElevatedButton(
                      style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all(
                          const Color(MyColor.PRIMARY_COLOR),
                        ),
                        shape: MaterialStateProperty.all(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(18),
                          ),
                        ),
                      ),
                      onPressed: () {
                        _showBottomSheet(context);
                      },
                      child: const Text(
                        '继续',
                        style: TextStyle(
                          color: Color(0xffFFDB8B),
                          fontSize: 16,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

//   付款方式
class PayMethodItem extends StatelessWidget {
  final String imgPath;
  final String name;

  const PayMethodItem({
    super.key,
    required this.imgPath,
    required this.name,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        bottom: 18,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: 26,
                height: 26,
                child: Image.asset(imgPath),
              ),
              const SizedBox(
                width: 10,
              ),
              Text(
                name,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w400,
                  color: Color(MyColor.PRIMARY_COLOR),
                ),
              ),
            ],
          ),
          Container(
            width: 22,
            height: 22,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: const Color(MyColor.PRIMARY_COLOR).withOpacity(0.4),
                width: 1,
              ),
            ),
            child: Center(
              child: Icon(
                Icons.add,
                color: const Color(MyColor.PRIMARY_COLOR).withOpacity(0.4),
                size: 16,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// 付款卡
Widget PayCardItem() {
  return Container(
    width: double.infinity,
    padding: const EdgeInsets.symmetric(
      horizontal: 20,
      vertical: 26,
    ),
    height: 180,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(14),
      gradient: const LinearGradient(
        begin: Alignment.topLeft, // 渐变的起始点
        end: Alignment.bottomRight, // 渐变的结束点
        colors: [
          Color.fromRGBO(248, 58, 38, 1), // rgba(248, 58, 38, 1)
          Color.fromRGBO(68, 129, 199, 1) // rgba(68, 129, 199, 1)
        ],
      ),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SvgPicture.asset('assets/images/bill/visa.svg'),
        const Text(
          '4200 9251 5167 9000',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w700,
            color: Colors.white,
          ),
        ),
        const Row(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '持卡人',
                  style: TextStyle(
                    fontSize: 8,
                    fontWeight: FontWeight.w400,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 8,
                ),
                Text(
                  '熬夜的佩奇',
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
            Expanded(
              child: Text(''),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '出口日期',
                  style: TextStyle(
                    fontSize: 8,
                    fontWeight: FontWeight.w400,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 8,
                ),
                Text(
                  '10/06/22',
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    ),
  );
}
